<template>
  <div id="main">
    <h2>教学待办管理</h2>
    <div class="head">
      <el-button
        v-if="this.jurisdiction == '教务主任'||this.jurisdiction == '医疗主管'"
        type="primary"
        style="margin:20px"
        @click="handleOpen('添加员工', 1)"
      >添加教学待办</el-button>
      <el-input
        v-model="searchTableInfo"
        placeholder="请输入搜索内容"
        style="width:240px;float: right;margin:20px;"
      />
    </div>
    <div id="table-area">
      <el-table
        v-loading="listLoading"
        :data="list.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
        >
          <template scope="scope">
            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="teachingTodoType"
          label="类别"
        />

        <el-table-column
          align="center"
          prop="teachingTodoExplain"
          label="说明"
        />

        <el-table-column
          align="center"
          prop="teachingTodoUrgency"
          label="紧急程度"
        >
          <template slot-scope="Scope">
            <span
              v-if="Scope.row.teachingTodoUrgency=='一般'"
              style="color: green"
            >{{ Scope.row.teachingTodoUrgency }}</span>
            <span
              v-if="Scope.row.teachingTodoUrgency=='紧急'"
              style="color: orange"
            >{{ Scope.row.teachingTodoUrgency }}</span>
            <span
              v-if="Scope.row.teachingTodoUrgency=='加急'"
              style="color: red"
            >{{ Scope.row.teachingTodoUrgency }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="teachingTodoRelatedPersonnel"
          label="相关人员"
        />

        <el-table-column
          align="center"
          prop="staffName"
          label="发起人"
        />

        <el-table-column
          align="center"
          prop="teachingTodoPostTime"
          label="发起时间"
        />

        <el-table-column
          align="center"
          prop="teachingTodoStatus"
          label="状态"
        />

        <el-table-column
          align="center"
          label="操作"
        >
          <template slot-scope="Scope">
            <el-button
              v-if="jurisdiction == '教务主任'|| jurisdiction == '医疗主管'"
              type="primary"
              icon="el-icon-edit"
              @click="handleOpen('修改教学待办', 2, Scope.row.teachingTodoId)"
            >编辑</el-button>
            <el-button
              v-if="jurisdiction == '授课老师' ||
                jurisdiction == '教学主管' ||
                jurisdiction == '教学主任' ||
                jurisdiction == '责任教师'"
              type="primary"
              icon="el-icon-search"
              @click="handleOpen('修改教学待办', 2, Scope.row.teachingTodoId)"
            >查看</el-button>
            <el-button
              v-if="jurisdiction == '教务主任'"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(Scope.row.teachingTodoId, Scope.row.teachingTodoExplain)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div id="pages">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5, 10]"
          :page-size="pagesize"
          layout="total, sizes,prev, pager, next"
          :total="list.length"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
      title=""
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="teachTodo"
        :model="teachTodo"
        label-position="top"
        :rules="rules"
      >
        <el-form-item
          prop="teachingTodoType"
          label="类别"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="teachTodo.teachingTodoType"
            placeholder="请选择"
          >
            <el-option
              v-for="item in teachTodotype"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="teachingTodoExplain"
          label="说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoExplain"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoUrgency"
          label="紧急程度"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="teachTodo.teachingTodoUrgency"
            placeholder="请选择"
          >
            <el-option
              v-for="item in TeachingTodoUrgency"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="teachingTodoRelatedPersonnelIDs"
          label="相关人员"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="teachTodo.teachingTodoRelatedPersonnelIDs"
            multiple
            placeholder="请选择"
            filterable
            style="width: 100%;"
          >
            <el-option
              v-for="j in staffList"
              :key="j.staffId"
              :value="j.staffId"
              :label="j.String"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          prop="teachingTodoInformationNote"
          label="情况说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoInformationNote"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoWorkArrangement"
          label="工作安排"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoWorkArrangement"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoImplementationInstructions"
          label="执行说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoImplementationInstructions"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoStageSummary"
          label="阶段总结"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoStageSummary"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoCompletionInstructions"
          label="完成说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoCompletionInstructions"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoFollowUpArrangements"
          label="后续安排"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoFollowUpArrangements"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoStatus"
          label="状态"
          :label-width="formLabelWidth"
        >
          <el-select
            v-model="teachTodo.teachingTodoStatus"
            placeholder="请选择"
          >
            <el-option
              v-for="item in teachingTodoStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >

        <el-button
            v-if="(editType == 2 && jurisdiction == '教务主任')||(editType == 2 && jurisdiction == '医疗主管')"
          type="primary"
          @click="handleUpdate('teachTodo')"
        >修 改</el-button>
        <el-button
          v-if="editType == 1"
          type="primary"
          @click="handleAdd('teachTodo')"
        >添 加</el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-if="jurisdiction ==='教学主管'"
      title=""
      :close-on-click-modal="false"
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
    >
      <el-form
        ref="teachTodo"
        :model="teachTodo"
        label-position="top"
        :rules="rules"
      >
        <el-form-item
          prop="teachingTodoType"
          label="类别"
          :label-width="formLabelWidth"
        >
          <el-tag
            type="info"
            effect="plain"
          >
            {{LB}}
          </el-tag>
        </el-form-item>

        <el-form-item
          prop="teachingTodoExplain"
          label="说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoExplain"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
            readonly
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoUrgency"
          label="紧急程度"
          :label-width="formLabelWidth"
        >
          <el-tag
            type="info"
            effect="plain"
          >
            {{ JJCD}}
          </el-tag>
        </el-form-item>

        <el-form-item
          prop="teachingTodoRelatedPersonnelIDs"
          label="相关人员"
          :label-width="formLabelWidth"
        >
          <el-tag
            type="info"
            effect="plain"
          >
            {{ XGRY}}
          </el-tag>
        </el-form-item>

        <el-form-item
          prop="teachingTodoInformationNote"
          label="情况说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoInformationNote"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
            readonly
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoWorkArrangement"
          label="工作安排"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoWorkArrangement"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
            readonly
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoImplementationInstructions"
          label="执行说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoImplementationInstructions"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
            readonly
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoStageSummary"
          label="阶段总结"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoStageSummary"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
            readonly
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoCompletionInstructions"
          label="完成说明"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoCompletionInstructions"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
            readonly
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoFollowUpArrangements"
          label="后续安排"
          :label-width="formLabelWidth"
        >
          <el-input
            v-model="teachTodo.teachingTodoFollowUpArrangements"
            autocomplete="off"
            maxlength="500"
            show-word-limit
            type="textarea"
            :autosize="{minRows:2,maxRows:20}"
            readonly
          />
        </el-form-item>

        <el-form-item
          prop="teachingTodoStatus"
          label="状态"
          :label-width="formLabelWidth"
        >
          <el-tag
            type="info"
            effect="plain"
          >
            {{ ZT}}
          </el-tag>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >

        <el-button
          v-if="jurisdiction == '教务主任'||jurisdiction == '医疗主管'"
          type="primary"
          @click="handleUpdate('teachTodo')"
        >修 改</el-button>
        <el-button
          v-if="editType == 1"
          type="primary"
          @click="handleAdd('teachTodo')"
        >添 加</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAll, getTeachTodoById, updateTeachTodo, deleteTeachTodo, addTeachTodo } from '@/api/newteachTodo'
import { selectstaff } from '@/api/staff'
import store from '@/store/index'
export default {
  data () {
    return {
      LB: [],
      XGRY: [],
      JJCD: [],
      ZT: [],
      jurisdiction: '',
      teachTodotype: [{
        value: 0,
        label: '教学安排'
      }, {
        value: 1,
        label: '教学督导'
      }, {
        value: 2,
        label: '个案讨论'
      }, {
        value: 3,
        label: '技术总结'
      }, {
        value: 4,
        label: '其他'
      }],
      TeachingTodoUrgency: [{
        value: 0,
        label: '一般'
      }, {
        value: 1,
        label: '紧急'
      }, {
        value: 2,
        label: '加急'
      }],
      teachingTodoStatus: [{
        value: 0,
        label: '发起'
      }, {
        value: 1,
        label: '准备'
      }, {
        value: 2,
        label: '执行'
      }, {
        value: 3,
        label: '完成'
      }],
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      tableList: [],
      listLoading: false,
      dialogFormVisible: false,
      editType: 1, // 1 添加 2 修改
      teachTodo: {},
      staffList: [],
      teachingTodoRelatedPersonnel: '',
      newTeachTodo: {

      },
      formLabelWidth: '200px',
      searchTableInfo: '',
      rules: {
        teachingTodoType: [
          { type: 'number', required: true, message: '类型不能为空', trigger: ['blur', 'change'] }
        ],
        teachingTodoExplain: [
          { required: true, message: '说明不能为空', trigger: 'blur' }
        ],
        teachingTodoUrgency: [
          { type: 'number', required: true, message: '紧急程度不能为空', trigger: ['blur', 'change'] }
        ],
        teachingTodoRelatedPersonnelIDs: [
          { type: 'array', required: true, message: '相关人员不能为空', trigger: ['blur', 'change'] }
        ],
        teachingTodoInformationNote: [
          { required: true, message: '情况说明不能为空', trigger: 'blur' }
        ],
        teachingTodoWorkArrangement: [
          { required: true, message: '工作安排不能为空', trigger: 'blur' }
        ],
        teachingTodoImplementationInstructions: [
          { required: true, message: '执行说明不能为空', trigger: 'blur' }
        ],
        teachingTodoStageSummary: [
          { required: true, message: '阶段总结不能为空', trigger: 'blur' }
        ],
        teachingTodoCompletionInstructions: [
          { required: true, message: '完成说明不能为空', trigger: 'blur' }
        ],
        teachingTodoFollowUpArrangements: [
          { required: true, message: '后续安排不能为空', trigger: 'blur' }
        ],
        teachingTodoStatus: [
          { required: true, message: '状态不能为空', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  computed: {
    // 根据计算属性模糊搜索
    list () {
      const searchTableInfo = this.searchTableInfo

      if (searchTableInfo) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableList.filter(data => {
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return (
              String(data[key])
                .toLowerCase()
                .indexOf(searchTableInfo) > -1
            )
          })
        })
      }
      return this.tableList
    }
  },
  created () {
    this.jurisdiction = store.getters.roles[0]

    this.selectStaff()
    this.fetchData()
  },
  methods: {
    // 每页下拉显示数据
    handleSizeChange: function (size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    handleClick (row) {

    },
    fetchData () {
      this.tableList = []
      this.listLoading = true
      getAll().then(data => {
        for (var i = 0; i < data.data.records.length; i++) {
          this.newTeachTodo.teachingTodoId = data.data.records[i].teachingTodoId
          switch (data.data.records[i].teachingTodoType) {
            case 0:
              this.newTeachTodo.teachingTodoType = '教学安排'
              break
            case 1:
              this.newTeachTodo.teachingTodoType = '教学督导'
              break
            case 2:
              this.newTeachTodo.teachingTodoType = '个案讨论'
              break
            case 3:
              this.newTeachTodo.teachingTodoType = '技术总结'
              break
            case 4:
              this.newTeachTodo.teachingTodoType = '其他'
              break
          }
          if (data.data.records[i].teachingTodoExplain === '') {
            this.newTeachTodo.teachingTodoExplain = '未存储数据'
          } else {
            this.newTeachTodo.teachingTodoExplain = data.data.records[i].teachingTodoExplain
          }

          switch (data.data.records[i].teachingTodoUrgency) {
            case 0:
              this.newTeachTodo.teachingTodoUrgency = '一般'
              break
            case 1:
              this.newTeachTodo.teachingTodoUrgency = '紧急'
              break
            case 2:
              this.newTeachTodo.teachingTodoUrgency = '加急'
              break
          }
          this.newTeachTodo.teachingTodoRelatedPersonnel = data.data.records[i].teachingTodoRelatedPersonnelIdNames.join("；")
          this.newTeachTodo.staffName = data.data.records[i].teachingTodoPostUserName
          this.newTeachTodo.teachingTodoPostTime = data.data.records[i].teachingTodoPostTime
          switch (data.data.records[i].teachingTodoStatus) {
            case 0:
              this.newTeachTodo.teachingTodoStatus = '发起'
              break
            case 1:
              this.newTeachTodo.teachingTodoStatus = '准备'
              break
            case 2:
              this.newTeachTodo.teachingTodoStatus = '执行'
              break
            case 3:
              this.newTeachTodo.teachingTodoStatus = '完成'
              break
          }
          this.tableList.push(this.newTeachTodo)
          this.newTeachTodo = {}
        }
        // this.tableList = data.data
        this.listLoading = false
      })
    },
    selectStaff () {
      selectstaff().then(resp => {
        this.staffList = resp.data.records
      })
    },
    handleDelete (id, explain) {
      this.$confirm('确认删除该教学待办？教学待办说明为' + explain).then(() =>
        deleteTeachTodo(id).then(data => {
          this.$notify({
            title: '操作成功',
            type: 'success'
          })
          const totalPage = Math.ceil(
            (this.tableList.length - 1) / this.pagesize
          )
          const page =
            this.currentPage > totalPage ? totalPage : this.currentPage
          this.currentPage = this.currentPage < 1 ? 1 : page
          this.fetchData()
        })
      )
    },
    handleAdd (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          addTeachTodo(this.teachTodo).then(resp => {
            this.$notify({
              title: '操作成功',
              type: 'success'
            })
            this.fetchData()
          })
          this.handleClose()
          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    },
    handleOpen (title, type, id) {

      this.teachTodo = {}
      this.title = title
      this.editType = type


      if (type === 2) {
        getTeachTodoById(id).then(resp => {

          this.teachTodo = resp.data.records
          var listId = resp.data.records.teachingTodoRelatedPersonnelIDs
          var listName = this.teachTodo.teachingTodoRelatedPersonnelIdNames

          var list = this.teachTodo.teachingTodoRelatedPersonnelIDs
            .toString()
            .split(",");
          for (var i = 0; i < list.length; i++) {
            list[i] = parseInt(list[i]);
          }
          // console.log("这是改变之后的list", this.teachingDiscussion);
          this.teachTodo.teachingTodoRelatedPersonnelIdNames = list;
          if (this.jurisdiction === "教学主管") {

            for (let i1 = 0; i1 < this.TeachingTodoUrgency.length; i1++) {
              if (
                this.teachTodo.teachingTodoUrgency ==
                this.TeachingTodoUrgency[i1].value
              ) {
                // console.log(this.options[i1].label);
                this.JJCD = this.TeachingTodoUrgency[i1].label;
              }
            }
            // console.log(
            //   this.teachingDiscussion.teachingDiscussionRelatedPersonnelIDs
            // );
            // console.log(this.staff);
            for (let i2 = 0; i2 < this.staffList.length; i2++) {
              for (
                let j2 = 0;
                j2 <
                this.teachTodo.teachingTodoRelatedPersonnelIDs
                  .length;
                j2++
              ) {
                if (
                  this.teachTodo.teachingTodoRelatedPersonnelIDs[
                  j2
                  ] == this.staffList[i2].staffId
                ) {
                  this.XGRY.push(this.staffList[i2].String);
                }
              }
            }
            for (let i3 = 0; i3 < this.teachTodotype.length; i3++) {
              if (this.teachTodo.teachingTodoType == this.teachTodotype[i3].value) {
                this.LB = this.teachTodotype[i3].label
              }
            }
            for (let i4 = 0; i4 < this.teachingTodoStatus.length; i4++) {
              if (this.teachTodo.teachingTodoStatus == this.teachingTodoStatus[i4].value) {
                this.ZT = this.teachingTodoStatus[i4].label
              }
            }

            for (var i = 0; i < listId.length; i++) {
              let addList = {
                staffId: listId[i],
                String: listName[i]
              }
              list.push(addList)
            }
            this.teachTodo.teachingTodoRelatedPersonnel = list
          }
        })
      }
      this.dialogFormVisible = true

    },
    handleClose () {
      this.dialogFormVisible = false
      this.$refs.teachTodo.resetFields();
      this.teachTodo = {}
    },
    handleUpdate (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {

          this.teachTodo.teachingTodoPostUserName = store.getters.name
          this.teachTodo.teachingTodoRelatedPersonnel = this.teachingTodoRelatedPersonnel
          updateTeachTodo(this.teachTodo).then(resp => {
            this.$notify({
              title: '修改成功',
              type: 'success'
            })
            this.fetchData()
          })
          this.dialogFormVisible = false
          return true
        } else {
          this.$notify({
            title: '请正确填写',
            type: 'error'
          })
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
#main {
  margin-left: 5px;
  margin-right: 5px;
}
#table-area {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
